<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">
<style>
	html, body, #app {
	width: 100%;
	height: 100%;
	background-color: aliceblue;
	font-size: 20px;
	}
	.d1{
	width: 99%;
	height: 45%;	
	font-size: 25px;
	}
	.d2{
		width: 99%;
		height: 50%;
		margin-top: 15px;
	}
	.f1{
		float: left;
	}
	.c1{
		width: 54.87%;
		height: 100%;
	}
	.c2{
		width: 100%;
		height: 100%;
	}
	.c3{
		width: 42.87%;
		height: 100%;
		margin-left: 2%;
	}
	ul{
		list-style: none;
	}
	.d3{
		width: 49%;
		height: 100%;
	}
	.d4{
		width: 49%;
		height: 100%;
		margin-top: 30px;
	}
	.p1{
		font-size: 30px;
		font-weight: bold;
	}
	.p2{
		font-size: 20px;
	}
	.p3{
		font-size: 14px;
	}
	.p4{
		font-size: 44px;
		font-weight: bold;
		padding-left: 40px;
	}
	.u1 li{
		width: 250px;
		height: 40px;
		background-color: aliceblue;
		margin: 2px 0;
	}
	.s1{
		font-weight: bold;
		float: left;
		font-size: 25px;
	}
	.s2{
		font-weight: 100;
		float: left;
		margin-left: 40px;
	}
	.s3{
		font-weight: bold;
		float: right;
		font-size: 25px;
	}
</style>
<style>
	.el-carousel__item h3 {
	  color: #475669;
	  font-size: 14px;
	  opacity: 0.75;
	  line-height: 200px;
	  margin: 0;
	}
	
	.el-carousel__item:nth-child(2n) {
	  background-color: #99a9bf;
	}
	
	.el-carousel__item:nth-child(2n+1) {
	  background-color: #d3dce6;
	}
	.text-center {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100%; /* 使子元素在垂直方向上也居中 */  
  text-align: center; /* 确保文本在水平方向上居中 */  
} 
  </style>
</head>
<body>
<div id="app">
	<div class="d1">
		<el-card class="box-card f1 c1">
			<div class="d3  f1">
				<p class="p4">排行榜</p>
				<ul class="u1">
					<li v-if="index < 3" v-for="(item,index) in fivetype"><span class="s1">{{index + 1}}</span><span class="s2">{{item.tname}}</span><span class="s3">{{item.count}}</span></li>
				</ul>
				</div>
			
			<div class="d4 f1">
			<el-carousel :interval="4000" type="card" height="250px">
				<el-carousel-item v-if="index < 3" v-for="(item, index) in sevenproduct" :key="item.content" class="text-center">
				  <p class="p1">NO.{{index + 1}}</p>
				  <p class="p2">{{item.content.substring(0,20)}}...</p>
				  <p class="p3">总刷题量:{{item.count}}</p>
				</el-carousel-item>
			  </el-carousel>
		</div>
		</el-card>
		<el-card class="box-card f1 c3" id="main1">
			
		</el-card>
	</div>
		
	<div class="d2">
		<el-card class="box-card c2" id="main2">
		</el-card>
	</div>
</div>
<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<scrip src="../../js/jquery.js"></scrip>
<script src="../js/echarts.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
let app = new Vue({
	el: '#app',
	data: {
		fivetype:[],
		sevenproduct:[]
	},
	methods: {
		//查询前5的类别
		getfivetype(){
			axios.post("../../cloud-other/back/getfivetype").then(resp=>{
				this.fivetype = resp.data.data;
				console.info(this.fivetype);
			});
		},
		getsevenproduct(){
			axios.post("../../cloud-other/back/getsevenproduct").then(resp=>{
				this.sevenproduct = resp.data.data;
			});
		}
	},
	created(){
		
	},
	computed: {
		chartOptions(){
		    const formattedData = this.fivetype.map(item => ({  
		        name: item.tname, // 假设item.name是存在的  
		        value: parseInt(item.count) // 将字符串转换为整数
		      }));
			return {
				title: {
				text: '类别刷题榜',
				subtext: 'Fake Data',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left'
			},
			series: [
				{
				name: 'Access From',
				type: 'pie',
				radius: '50%',
				data: formattedData,
				emphasis: {
					itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
				}
			]
					};
		},
		chartOptions2(){
			return {
				xAxis: {
					type: 'category',
					data: this.sevenproduct.map(item => item.content.substring(0,8) + "...")
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
					data: this.sevenproduct.map(item => item.count),
					type: 'bar',
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(180, 180, 180, 0.2)'
					}
					}
				]
					};
		},
	},
	mounted(){
		var chartDom = document.getElementById('main1');  
	    var myChart = echarts.init(chartDom);  
	    myChart.setOption(this.chartOptions);  
	  
	    // 使用 $watch 监听 chartOptions 的变化  
	    this.$watch('chartOptions', (newOptions) => {  
	      myChart.setOption(newOptions);  
	    }, { deep: true });
	  
	    // 第二个图表的初始化  
	    var chartDom2 = document.getElementById('main2');  
	    var myChart2 = echarts.init(chartDom2);  
	    myChart2.setOption(this.chartOptions2); // 注意这里使用 myChart2 而不是 myChart1  
	  
	    // 第二个图表的 $watch  
	    this.$watch('chartOptions2', (newOptions) => {  
	      myChart2.setOption(newOptions);  
	    }, { deep: true });
	    
	    this.getfivetype();
	    this.getsevenproduct();
	}
});
</script>
</body>
</html>